import React, {Fragment, useCallback, useState} from 'react';
import "./index.less"
import {PlusOutlined} from "@ant-design/icons";
import {Popover} from "antd";


function ContentPanel(props: { onClickMaterial: () => void, nodeId: string }) {
    return null;
}

export default React.memo((
    props: {
        nodeId: string
    }
) => {
    const {nodeId} = props
    const [open, setOpen] = useState(false)

    const handleOpenChange = useCallback((status: boolean) => {
        setOpen(status)
    }, [])

    const handleMaterialClick = useCallback(() => {
        setOpen(false)
    }, [])


    return (
        <Fragment>
            <div className="arrow">
                <div className="button-shell">
                    <Popover
                        placement="rightTop"
                        content={<ContentPanel nodeId={nodeId} onClickMaterial={handleMaterialClick}/>}
                        trigger="click"
                        open={open}
                        onOpenChange={handleOpenChange}
                    >
                        <div className="btn">
                            <PlusOutlined/>
                        </div>
                    </Popover>
                </div>
            </div>

        </Fragment>
    )
})
